<template>
  <div class="visitor-notVisited">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">安装餐厅:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.restaurantName" placeholder="请输入安装餐厅名称" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">设备MN码:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.mn" placeholder="请输入设备MN码" />
        </div>
      </div>

      <div class="btn-wrap">
        <a-button class="searchBtn" @click="searchQuery()" type="primary">搜索</a-button>
        <a-button class="resetBtn" @click="searchReset()" type="primary" style="background: #017f82">重置</a-button>
        <a-button @click="exportExcel('设备排名实时数据')" type="primary" class="exp">批量导出</a-button>
      </div>
    </div>

    <div>
      <a-table
        rowKey="monitorMn"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <template #fanStatus="record">
          {{ record.fanStatus == 1 ? '开' : '关' }}
        </template>
        <template #purifyStatus="record">
          {{ record.purifyStatus == 1 ? '开' : '关' }}
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getAction, downFile } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'visitor-notVisited',
  mixins: [JeecgListMixin],
  computed: {
    ...mapState({
      isAgencyId: (state) => state.user.isAgencyId,
    }),
  },
  watch: {
    isAgencyId(v) {
      this.queryParam.unitId = v.id ? v.id : ''
      this.searchQuery()
    },
  },
  data() {
    return {
      url: {
        list: '/device/data/find_real_data_page',
        exportXlsUrl: '/device/data/find_real_data_export',
        tree: true,
      },
      disableMixinCreated: true,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 60,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '行政区',
          dataIndex: 'regionName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '设备MN码',
          dataIndex: 'monitorMn',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '安装餐厅',
          dataIndex: 'restaurantName',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '时间',
          dataIndex: 'realTime',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '油烟(mg/m³)',
          dataIndex: 'thickSmoke',
          align: 'center',
          sorter: true,
          width: 120,
          ellipsis: true,
        },
        {
          title: '颗粒物(mg/m³)',
          dataIndex: 'particleHaze',
          align: 'center',
          sorter: true,
          width: 130,
          ellipsis: true,
        },
        {
          title: '非甲烷总烃(mg/m³)',
          dataIndex: 'nonMethane',
          align: 'center',
          sorter: true,
          width: 160,
          ellipsis: true,
        },
        {
          title: '排风机',
          // dataIndex: 'fanStatus',
          scopedSlots: { customRender: 'fanStatus' },
          align: 'center',
          ellipsis: true,
        },
        {
          title: '净化器',
          // dataIndex: 'purifyStatus',
          scopedSlots: { customRender: 'purifyStatus' },
          align: 'center',
          ellipsis: true,
        },
        {
          title: '联系人',
          dataIndex: 'chargeName',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '联系电话',
          dataIndex: 'chargePhone',
          align: 'center',
          ellipsis: true,
        },
      ],
    }
  },

  methods: {
    exportExcel(fileName) {
      let params = {
        unitId: sessionStorage.getItem('agencyId'),
        restaurantName: this.queryParam.restaurantName,
        mn: this.queryParam.mn,
      }
      debugger
      this.handleExportXls(fileName, params)
    },

    handleExportXls(fileName, tempParams) {
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      let param = this.getQueryParams()
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['selections'] = this.selectedRowKeys.join(',')
      }
      param = { ...tempParams }
      console.log('导出参数', param)
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(
            new Blob([data], {
              type: 'application/vnd.ms-excel',
            }),
            fileName + '.xls',
          )
        } else {
          let url = window.URL.createObjectURL(
            new Blob([data], {
              type: 'application/vnd.ms-excel',
            }),
          )
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.exp {
  margin-left: 0.1rem;
  width: 1rem;
  background: #045053;
  border: 1px solid #017f82;
  font-size: 0.14rem;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #00f8ff;
}
</style>
